import { useEffect, useState } from 'react' // 引入 useEffect
import { NavBar, Card, List, Toast } from 'antd-mobile' // 组件引入
import './index.css' // 页面样式
import { AntOutline, RightOutline } from 'antd-mobile-icons' // icon图标引入
import { getVisitorInfo } from '../../../../api/index' // 获取访客信息
import { useNavigate } from 'react-router-dom' // 路由



/* ts类型 */
type WeatherDataType = {
  browser: string;
  browser_ver: string;
  fengxiang: string;
  fl: string;
  high: string;
  ip: string;
  location: string;
  low: string;
  success: boolean;
  system: string;
  time: string;
  tip: string;
  tq: string;
  week: string;
};



function MyVisitors() {

  /* 路由 */
  const navigate = useNavigate();

  /* 变量声明 */
  const [visitorInfo, setVisitorInfo] = useState<WeatherDataType | null>(null) // 访客信息
  // 创建一个新的 Map 对象，用来存储天气代码与对应图标链接的映射关系
  // const weatherIcons: Map<string, string> = new Map([
  //   ['多云', 'https://i.i8tq.com/e_index/n01.png?2013'],
  //   ['晴天', 'https://i.i8tq.com/e_index/n00.png?2013'],
  //   ['阴天', 'https://i.i8tq.com/e_index/n02.png?2013'],
  //   ['下雨', 'https://i.i8tq.com/e_index/n03.png?2013'],
  //   ['雷阵雨', 'https://i.i8tq.com/e_index/n04.png?2013']
  // ]);

  /* 函数声明 */
  // 获取访客信息
  const getDataInfo = async () => {
    Toast.show({
      icon: 'loading',
      content: '加载中…',
      duration: 0,
    })
    try {
      const res = await getVisitorInfo()
      setVisitorInfo(res.data)
      Toast.clear()
      console.log(res)
    } catch (error) {
      Toast.clear()
      console.log(error);
    }
  }

  /* 函数调用 */
  useEffect(() => {
    getDataInfo()
  }, [])
  return (
    <>
      <div className="visitors-container">
        <NavBar onBack={() => navigate(-1)}></NavBar>
        <div className='content'>
          <Card style={{
            borderRadius: '12px'
          }}
            title={
              <div style={{ fontWeight: 'normal', fontSize: '.32rem', color: '#fff', display: 'flex', alignItems: 'center' }}>
                <AntOutline fontSize={28} style={{ marginRight: '4px', color: '#1677ff' }} />
                访客信息
              </div>
            }
            extra={<RightOutline />}
          >
            <div>
              <List style={{
                '--border-bottom': 'none',
                '--border-top': 'none',
                '--border-inner': 'none',
                'color': '#fff'
              }}>
                <List.Item>
                  <div>
                    <span style={{ background: 'linear-gradient(to right, #ffecd2, #fcb69f)' }}>来访时间: {visitorInfo?.time}</span>
                  </div>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #a8edea, #fed6e3)' }}>来访IP: {visitorInfo?.ip}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #f093fb, #f5576c)' }}>来访IP归属: {visitorInfo?.location}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #f6d365, #fda085)' }}>来访设备: {visitorInfo?.system}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #96fbc4, #f9f586)' }}>来访浏览器: {visitorInfo?.browser}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #f2709c, #ff9472)' }}>来访浏览器版本: {visitorInfo?.browser_ver}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #e0c3fc, #8ec5fc)' }}>今日天气: {visitorInfo?.tq}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #6a11cb, #2575fc)', 'color': '#fff' }}>今日最高温: {visitorInfo?.high}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #00c6ff, #0072ff)' }}>今日最低温: {visitorInfo?.low}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #fdfbfb, #ebedee)' }}>风向信息: {visitorInfo?.fengxiang}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #90f7ec, #32ccbc)' }}>风力等级: {visitorInfo?.fl}</span>
                </List.Item>
                <List.Item>
                  <span style={{ background: 'linear-gradient(to right, #c3cfe2, #c3cfe2)' }}>天气提示: {visitorInfo?.tip}</span>
                </List.Item>

              </List>
            </div>
          </Card>
        </div>
      </div>
    </>
  );
}

export default MyVisitors;